<template>
  <div class="field-show-config">
    <a-input @click="openShowConfig" placeholder="请选择字段" readonly :value="fieldTitles"/>

    <FieldShowConfigModal
      :includeForms="includeForms" :title="title" @ok="selected"
      :formDefinition="formDefinition" ref="FieldShowConfigModal"/>
  </div>
</template>
<script>
import {createModelForVue, createProps, guid} from '@/utils';
import {createFormDefinition, getAllFields} from '@/components/hhd/design/FormDesigner/types';
import FieldShowConfigModal from '@/components/hhd/design/FormMenu/FieldShowConfigModal.vue';

export default {
  name: 'FieldShowConfig',
  components: {FieldShowConfigModal},
  model: createModelForVue('showFields'),
  props: {
    includeForms: createProps(Array, () => undefined),
    title: createProps(String),
    showFields: createProps(Array),
    formDefinition: createProps(Object, createFormDefinition)
  },
  methods: {
    openShowConfig() {
      let list = this.showFields || [];
      list = list.map(f => ({
        id: f.fieldId,
        label: f.label
      }))
      this.$refs.FieldShowConfigModal.open(list);
    },
    selected(fields) {
      let res = fields.map(f => ({
        id: guid(),
        fieldId: f.id,
        label: f.label
      }));
      this.$emit('change', res);
    },
  },
  computed: {
    fieldTitles() {
      let list = this.showFields || [], fields = getAllFields(this.formDefinition);
      let temp = undefined

      return list.map(field => {
        return field.label || (temp = fields.find(f => f.id === field.fieldId)) && temp.label || undefined
      }).toString()
    },
  }
};
</script>
<style>
.field-show-config {

}
</style>